<template>
  <div class="create-wm bsb">
    <div class="name input-box">
      <p>SSID/WIFI名称</p>
      <input class="input-inner gl-input w100" v-model="ssid" type="text" placeholder="请输入SSID/WIFI名称"/>
    </div>
    <div class="paw input-box">
      <p>WIFI密码</p>
      <input class="input-inner gl-input w100" v-model="password" type="text" placeholder="请输入WIFI密码"/>
    </div>
    <div class="create tac" @click="createCode">生成二维码</div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        ssid: '',
        password: '',
      };
    },
    methods: {
      createCode() {
        let {ssid, password} = this;
        if (!ssid) {
          // 请输入SSID/WIFI名称
          this.$toast('请输入SSID/WIFI名称');
          return;
        } else if (!password) {
          // 请输入WIFI密码
          this.$toast('请输入WIFI密码');
          return;
        }
        this.$router.replace({
          name: 'SetNetwork',
          query: {ssid, password},
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .create-wm {
    min-height: 100vh;
    background-color: #fff;
    padding: 1.22rem 1rem;
    .input-box {
      border-bottom: 1px solid #dedede;
      & + .input-box {
        margin-top: 1.34rem;
      }
      .input-inner {
        margin: 1.09rem 0 .5rem;
        font-size: .88rem;
        height: .91rem;
        line-height: 1.2rem;
      }
    }
    .create {
      margin: 2.5rem 1.69rem 0;
      color: #fff;
      line-height: 2.81rem;
      font-size: 1rem;
      border-radius: .31rem;
      background-image: linear-gradient(90deg, #00baff, #3275ff);
      &:hover {
        background-image: linear-gradient(90deg, #00a0dc, #1762f9);
      }
    }
  }
</style>
